<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="../../../resource/css/dropload.css">
    <link rel="stylesheet" href="../../../resource/css/refresh.css">
    <link rel="stylesheet" href="../../../resource/css/record.css">
</head>
<!--<style>-->
    <!--body{ font-size:12px; font-family:"Microsoft YaHei","宋体",arial; background-color:#fff;}-->
    <!--*html{background-image:url(about:blank); background-attachment:fixed;}-->
    <!--.scroller li {-->
        <!--height:60px;-->
        <!--border-bottom: 1px solid #eee;-->
        <!--background-color: #fff;-->
        <!--font-size: 14px;-->

    <!--}-->
    <!--.game-info{ padding:15px 10px; background:#FFF; line-height:22px; color:#333; font-size:14px;}-->
    <!--.game-info p{color:#999; font-size:12px;}-->
<!--</style>-->
<body>
    <div class="content" id="content">
        <ul id="recordList">
        </ul>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<!--<script src="../../../resource/js/iscroll.js"></script>-->
<!--<script src="../../../resource/js/pullToRefresh.js"></script>-->
<!--<script src="../../../resource/js/pullToRefresh.mini.js"></script>-->
<script src="../../../resource/js/dropload.min.js"></script>

<script>
    var token;
    mag.toLogin(function (res) {
        token = res.token;
    })
</script>
<script>
    $(function(){
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 10;
        console.log(token);
        // dropload
        $('.content').dropload({
            scrollArea : window,
            domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh">↓下拉刷新↓</div>',
                domUpdate  : '<div class="dropload-update">↑释放更新↑</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh">↑上拉加载更多↑</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData  : '<div class="dropload-noData">没东西了</div>'
            },
            loadUpFn : function(me){
                $.ajax({
                    type: 'POST',
                    url: '/Stick/getStickPicList',
                    data:{
                        token:token,
                        page:0,
                        size:10
                    },
                    dataType: 'json',
                    success: function(data){
                        page = 1;
                        var list = data.data;
                        var li = '';
                        for(var i = 0; i <list.length; i++){
                            li += '<li>\n' +
                                '               <div class="top">\n' +
                                '                   <div style="height: 2.5rem">\n' +
                                '                       <span class="title">'+list[i].intro+'</span>\n' +
                                '                       <br>';

                            if (list[i].status == 0){
                                li += '<span class="status not">未审核</span>';
                            } else if (list[i].status == 1) {
                                li += '<span class="status yes">已通过</span>';
                            } else{
                                li += '<span class="status not">已拒绝</span>';
                            }

                            li += '</div>\n' +
                                '                   <div class="assembly">\n' +
                                '                       <img src="../../../resource/img/time.png" height="15" width="15"/>\n' +
                                '                       <span>'+list[i].create_time+'</span>\n' +
                                '                   </div>\n' +
                                '               </div>\n' +
                                '                <div class="bottom">\n' +
                                '                    <img src="'+list[i].pic_url+'" alt="">\n' +
                                '                </div>\n' +
                                '                <div class="clear"></div>\n' +
                                '            </li>';
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('#recoedList').html(li);
                            // 每次数据加载完，必须重置
                            me.resetload();
                            // 重置页数，重新获取loadDownFn的数据
                            // 解锁loadDownFn里锁定的情况
                            me.unlock();
                            me.noData(false);
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('网络出错!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            loadDownFn : function(me){
                var li = '';
                $.ajax({
                    type: 'POST',
                    url: '/Stick/getStickPicList',
                    data:{
                        token:token,
                        page:page,
                        size:size
                    },
                    dataType: 'json',
                    success: function(data){
                        var list = data.data;
                        var arrLen = data.data.length;
                        if(arrLen > 0){
                            for(var i = 0; i < arrLen; i++){
                                li += '<li>\n' +
                                    '               <div class="top">\n' +
                                    '                   <div style="height: 2.5rem">\n' +
                                    '                       <span class="title">'+list[i].intro+'</span>\n' +
                                    '                       <br>';

                                if (list[i].status == 0){
                                    li += '<span class="status not">未审核</span>';
                                } else if (list[i].status == 1) {
                                    li += '<span class="status yes">已通过</span>';
                                } else{
                                    li += '<span class="status not">已拒绝</span>';
                                }

                                li += '</div>\n' +
                                    '                   <div class="assembly">\n' +
                                    '                       <img src="../../../resource/img/time.png" height="15" width="15"/>\n' +
                                    '                       <span>'+list[i].create_time+'</span>\n' +
                                    '                   </div>\n' +
                                    '               </div>\n' +
                                    '                <div class="bottom">\n' +
                                    '                    <img src="'+list[i].pic_url+'" alt="">\n' +
                                    '                </div>\n' +
                                    '                <div class="clear"></div>\n' +
                                    '            </li>';
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        page++;
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('#recordList').append(li);
                            // 每次数据插入，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        // alert('网络错误!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            threshold : 50
        });
    });
</script>
</html>